<template>
  <div>
    <p>{{ name }}</p>
    <p>{{ obj.name }}</p>
    <p>{{ obj.age }}</p>
    <p>{{ obj.address.city }}</p>
    <hr />
    <p>{{ newobj.name }}</p>
    <p>{{ newobj.age }}</p>
    <p>{{ newobj.address.city }}</p>
    <hr />
    <p>求和加加{{ num }}</p>
    <button @click="updateObj">修改整个对象reactive</button>
    <button @click="updateNewObj">修改整个对象ref</button>
    <button @click="updateNum">求和加1</button>
  </div>
</template>

<script setup lang="ts" name="PersonComponent">
import { reactive, ref } from "vue";
let name = ref("小王");
let obj = reactive({
  name: "小王",
  age: 18,
  address: { city: "北京" },
});
name.value = "小王1";
obj.name = "小王2";

let newobj = ref({
  name: "小王",
  age: 18,
  address: { city: "北京" },
});
let num = ref(0);
function updateObj() {
  //修改reactive整体对象，不能直接修改，只能用Object.assign
  //Object.assign 浅拷贝   obj = { name: "小王3", age: 19 }
  //语法：Object.assign(target, source1, source2, ...)   什么意思？ 浅拷贝   target 目标对象  source1 源对象    source2 源对象    ...  源对象  多个源对象可以同时拷贝  obj = { name: "小王3", age: 19, address: { city: "北京" } }
  Object.assign(
    obj,
    { name: "小王3", age: 19 },
    { name: "小王4", age: 22, address: { city: "上海" } }
  );
}
function updateNewObj() {
  //修改ref整个对象，可以直接用.value来替换
  newobj.value = { name: "小王5", age: 23, address: { city: "厦门" } };
}
function updateNum() {
  num.value += 1;
}
</script>

<style scoped></style>
